<style>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }

</style>

<template>
  <div>
    <!--学生表格-->
    <div align="center">
      <div style="margin-top: 15px;">
        <el-button @click="addStudent" type="success" round icon="el-icon-check" >添加学生</el-button>
        <el-button @click="RefreshStu" type="success" round icon="el-icon-check" >刷新</el-button>
        <el-input clearable placeholder="请输入关键字"
                  v-model="SearchContent"
                  style="width:20%"
                  class="input-with-select"
                  @keyup.enter.native="SearchStu"
                  @change="SearchStu">
          <el-button slot="append" type="primary" icon="el-icon-search" @click="SearchStu">搜索</el-button>
        </el-input>
      </div>

      <el-table :data="this.$store.state.tableData" style="width: 80%" border show-header >
        <el-table-column align="center" prop="ID" label="学号" width="120" ></el-table-column>
        <el-table-column align="center" prop="StuName" label="姓名" width="120"></el-table-column>
        <el-table-column align="center" prop="Sex" label="性别" width="120"></el-table-column>
        <el-table-column align="center" prop="StuAge" label="年龄" width="120"></el-table-column>
        <el-table-column align="center" prop="StuDate" label="入学时间" width="160"></el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <!--弹出表格-->
              <el-button slot="reference" @click="handleClick(scope.row)" size="small">去选课</el-button>
            <el-button @click="deleStu(scope.row)" type="danger" plain icon="el-icon-delete" size="small" round/>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination" align="center">
        <!--handleSizeChange：表示每页记录的个数发生变化时触发的函数-->
        <!--handleCurrentChange：包含一个参数，表示每页显示几条记录-->
        <!--@current-change:页码发生变化时调用的函数，函数中包含一个参数，表示当前页-->
        <!--:current-page:当前页，表示当前页面上展示的是第几页-->
        <!--:page-sizes:分页选项，页面提供一个列表让你选择每页显示多少条记录-->
        <!--:page-size: 表示每页显示的记录数，即我们命名的pageSize-->
        <!--:total: 表示总记录数，即我们这个表格中一共要显示多少条数据-->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageConf.pageCode"
          :page-sizes="pageConf.pageOption"
          :page-size="pageConf.pageSize"
          :total="pageConf.totalPage">
        </el-pagination>
      </div>
    </div>
    <!--课表-->
    <div >
      <CouTable ref="mychild" v-show="isShow2"></CouTable>
    </div>
        <!--增加学生-->
        <addStudent></addStudent>
    </div>
</template>
<script>
  import addStudent  from './addStu.vue'
  import CouTable from './CouTable.vue' //导入课表组件（子组件）
  import {getCouList,getStuList, UpStuCou,deleteStu,findLikeStus} from '@/api/userApi' //导入接口工具
  export default {
    //组件注册
    components: {
      CouTable: CouTable,//注册子组件
      addStudent: addStudent//注册子组件
    },
    data() {
      return {
        SearchContent:'',//搜索资源专用
        conData: [],   //1
        isShow2: false,
        dialogTableVisible: false, //暂时不用
        //定义分页配置 pageConf
        pageConf: {//学生表专用
          pageCode: 1, //当前页
          pageSize: 4, //每页显示的记录数
          totalPage: 4, //总记录数（总条数）
          pageOption: [4, 8, 12], //分页选项
        },
        deleStuName:'',//删除操作专用
        addStuName:''

      }
    },


    methods: {


      //弹出表单
      addStudent(){
       // this.dialogTableVisible=true;//默认页面不显示为false,点击按钮将这个属性变成true
       this.$store.state.dialogTableVisible=true;
      },
      //刷新学生表（定位页）
      RefreshStu(){
        this.$store.commit('RefreshStu')//调用全局组件中的方法，刷新学生列表
        this.addStuCess() //提示
      },

      //学生表当前“条数”改变时触发的函数
      handleSizeChange(val) {
        console.log("当前条数",val,"之前条数：",this.pageConf.pageSize)
        console.log("当前页不变：",this.pageConf.pageCode)
        getStuList(this.pageConf.pageCode,val).then(response => {
          const data = response.data//获取后台响应的原始数据

         // this.pageConf.pageCode= data.json.pageNum;//覆盖原来的页数 （解释：条数变动，无需覆盖页数，防止搜索结果被重置）
          this.pageConf.pageSize=data.pageSize;//覆盖原来的当前条数
        //  this.pageConf.totalPage = data.json.total;//覆盖原来的总条数
          /*===================================================*/
         // this.$store.state.Code = data.json.pageNum;//复制到全局中  （解释：条数改变，无需覆盖当前页数，防止搜索结果被重置）
          this.$store.state.Size =data.pageSize;//复制到全局中
        //  this.$store.state.total = data.json.total;//复制到全局中
          this.$store.state.tableData = data.data //复制到全局


          // this.UpStuCous()//刷新已选课 （拒绝刷新：因为未点击"去选课"之前，无法获取学生id,故无法获取课程列表）
          console.log("学生表数据:",data.data)
          console.log("取出的页数：",data.pageNum)
          console.log("取出的条数：",data.pageSize)
          console.log("取出的总条数：",data.total)
          console.log("%c当前“条数”已变，当前“页数”不变", "color:green")
          this.isShow2 =  false //页数和条数发生变化后，就关闭选课表
        })

      },
      //学生表当前“页数”改变时触发的函数
      handleCurrentChange(val) {
        console.log("当前页：",val,"之前页：",this.pageConf.pageCode)
        console.log("当前条数不变",this.pageConf.pageSize)
        getStuList(val,this.pageConf.pageSize).then(response => {
          const data = response.data//获取后台响应的原始数据
            this.tableData = data.data;//从原始数据中获取出学生数据
          this.pageConf.pageCode= data.pageNum;//覆盖原来的页数
        //  this.pageConf.pageSize=data.json.pageSize;//覆盖原来的当前条数
        //  this.pageConf.totalPage = data.json.total;//覆盖原来的总条数  （解释：页数移动，无需覆盖总条数，防止搜索结果被重置）
          /*==================================================================*/
          this.$store.state.Code = data.pageNum;//复制到全局中
        //  this.$store.state.Size =data.json.pageSize;//复制到全局中   （解释：页数改变，无需覆盖当前条数，防止搜索结果被重置）
        //  this.$store.state.total = data.json.total;//复制到全局中
          this.$store.state.tableData = data.data //复制到全局
          //this.UpStuCous()//刷新已选课
          console.log("学生数据是 :",data.data)
          console.log("取出的页数：",data.pageNum)
          console.log("取出的条数：",data.pageSize)
          console.log("取出的总条数：",data.total)
          console.log("%c当前“条数”不变，当前“页数”已变", "color:green")
          this.isShow2 =  false //页数和条数发生变化后，就关闭选课表
        })
      },

      //删除学生
      deleStu(row){
        this.deleStuName= row.StuName
        /*删除学生*/
        console.log("此时的Sid是：",row.ID)
        deleteStu(row.ID).then(response => {
          const data = response.data
          this.$store.commit('RefreshStu')//调用全局组件中的方法，刷新学生列表
            this.DeleStuCess()//成功提示
          console.log("%c 已删除学生", "color:green")
          this.isShow2 =  false //关闭选课表
          }).catch(error => {
          })
      },

      //搜索学生
      SearchStu(){
        findLikeStus(this.SearchContent,this.pageConf.pageCode,this.pageConf.pageSize).then(response => {
          const data = response.data//获取后台响应的原始数据
          this.pageConf.pageCode= data.pageNum;//覆盖原来的页数
          this.pageConf.pageSize=data.pageSize;//覆盖原来的当前条数
          this.pageConf.totalPage = data.total;//覆盖原来的总条数
          /*==================================================================*/
          this.$store.state.Code = data.pageNum;//复制到全局中
          this.$store.state.Size =data.pageSize;//复制到全局中
          this.$store.state.tableData = data.data //复制到全局
          this.isShow2 =  false //页数和条数发生变化后，就关闭选课表
          console.log("学生表数据:",data.data)
          console.log("取出的页数：",data.pageNum)
          console.log("取出的条数：",data.pageSize)
          console.log("取出的总条数：",data.total)
          console.log("调用了模糊搜索")

        })
      },

      /*获取学生列表*/
      getStu() {
        console.log("当前默认页：",this.pageConf.pageCode,"当前默认条数",this,this.pageConf.pageSize)
        getStuList(this.pageConf.pageCode,this.pageConf.pageSize).then(response => {
          const data = response.data//获取后台响应的原始数据
          this.pageConf.pageCode= data.pageNum;//覆盖原来的页数
          this.pageConf.pageSize=data.pageSize;//覆盖原来的当前条数
          this.pageConf.totalPage = data.total;//覆盖原来的总条数
          /*==================================================================*/
          this.$store.state.Code = data.pageNum;//复制到全局中
          this.$store.state.Size =data.pageSize;//复制到全局中
         // this.$store.state.total = data.json.total;//复制到全局中
          this.$store.state.tableData = data.data //复制到全局
          console.log("学生表数据:",data.data)
          console.log("取出的页数：",data.pageNum)
          console.log("取出的条数：",data.pageSize)
          console.log("取出的总条数：",data.total)
          console.log("调用了")

        })
      },

      /*去选课事件*/
      handleClick(C) {
        this.isShow2 = !this.isShow2
        this.$store.state.qxkStuId=C.ID//存一份实时的学生id到vuex
        this.getCtu()  //调用此方法，刷新课程初始列表
        this.UpStuCous()//调用此方法，点击“去选课后即可刷新“已”选课表
      },




      /*获取选课程数据*/
      getCtu() {
        console.log("%c课程列表刷新了", "color:blue","当前学生id:",this.$store.state.qxkStuId,
          "当前页：",this.$store.state.pageConf.pageCode,"当前条数：",this.$store.state.pageConf.pageSize,)

        getCouList(this.$store.state.qxkStuId,this.$store.state.pageConf.pageCode,this.$store.state.pageConf.pageSize).then(response => {
          const data = response.data//获取后台响应的原始数据
          this.$store.state.StuNoSeleData = data.data;//把课数据存入StuNoSeleData
          this.$store.state.pageConf.pageCode = data.pageNum//覆盖掉原有的当前页码
          this.$store.state.pageConf.pageSize= data.pageSize//覆盖掉原来的当前条数
          this.$store.state.pageConf.totalPage = data.total//覆盖掉原来的总跳数
          console.log("列表数据：",data.data)
          console.log("取出的页数：",data.pageNum)
          console.log("取出的条数：",data.pageSize)
          console.log("取出的总条数：",data.total)
          console.log("%c当前“条数”不变，当前“页数”已变", "color:green")
          this.UpStuCous()//刷新已选课
        })
      },

      /*展示已选课*/
      UpStuCous() {
        UpStuCou(this.$store.state.qxkStuId).then(response => {
          const data = response.data
          console.log("%c 已选课刷新了，数据是：", "color:green",data.data)
          this.$store.state.StuCous = data.data  //已选的课的数据，覆盖vuex中StuCous变量
        }).catch(error => {
        })
      },

      /*事件消息*/
      addStuCess() {
        this.$notify({
          title: '成功',
          type: 'success',
          duration: 1200
        });
      },
      DeleStuCess() {
        this.$notify({
          title: '已删除'+this.deleStuName,
          type: 'success',
          duration: 800,
          position: 'top-left'
        });
      },

    },

    mounted: function () {//vue对象创建之后，即刻调用该方法
      this.getStu()//把学生列表数据方式此处，启动vue就能渲染
    }
  }


</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
